<template>
  <div class="rule-group">
    <div class="attendance-content" v-if="!hide">
      <!-- <div class="header-tip flex">
        <span>请先在【薪酬设置】设置企业的工资表模板，然后新增计薪规则【计时工资—>计件工资—>绩效规则—>津补贴规则—>计税规则—>考勤计薪规则——>薪资组】</span>
        <Icon type="ios-close" size="18" />
      </div>-->
      <div class="guide-intro">
        <div class="guide-title">使用指南</div>
        <div class="guide-content">
          <div class="guide-item">1、考勤计薪规则用于管理企业的旷工扣款、请假扣款、加班费规则。</div>
          <div class="guide-item">2、若有多个不同规则，请新增方案。设置后，请到薪资组关联对应的方案，一个薪资组内的员工共用一套考勤计薪方案。</div>
          <div class="guide-item">3、工资核算时，根据该方案设置的规则，对员工实际考勤情况进行工资换算。</div>
        </div>
      </div>

      <div class="query-section flex">
        <div class="left-query-wrap flex-box"></div>
        <Button class="save-btn-green" @click="toDetail">新增计薪方案</Button>
      </div>
      <div class="table-section">
        <Table width="100%" :columns="columns" :data="list"></Table>
        <Nodata desc="暂无数据"></Nodata>
      </div>
    </div>

    <div class="sub-content" v-if="hide">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { salary } from "@/apis";
import http from "@/utils/http";
export default {
  data() {
    return {
      vertical: "1",
      current: 0,
      formItem: {
        input: ""
      },
      modal2: false,
      list: [],
      columns: [
        {
          title: "方案名称",
          key: "name"
        },
        {
          title: "迟到规则",
          key: "late",
          render: (h, params) => {
            return h("div", [
              h("div", {}, params.row.late.calculation_method),
              h("div", {}, "每次金额：" + params.row.late.money + " 元"),
              h("div", {}, "每月豁免次数：" + params.row.late.no_buckle + " 次")
            ]);
          }
        },
        {
          title: "早退规则",
          key: "early",
          render: (h, params) => {
            return h("div", [
              h("div", {}, params.row.early.calculation_method),
              h("div", {}, "每次金额：" + params.row.early.money + " 元"),
              h(
                "div",
                {},
                "每月豁免次数：" + params.row.early.no_buckle + " 次"
              )
            ]);
          }
        },
        {
          title: "缺卡规则",
          key: "miss",
          render: (h, params) => {
            return h("div", [
              h("div", {}, params.row.miss.calculation_method),
              h("div", {}, "每次金额：" + params.row.miss.money + " 元"),
              h("div", {}, "每月豁免次数：" + params.row.miss.no_buckle + " 次")
            ]);
          }
        },
        {
          title: "旷工扣款规则",
          key: "ab",
          render: (h, params) => {
            return h("div", [
              h("div", {}, params.row.ab.calculation_method),
              h("div", {}, "每次金额：" + params.row.ab.money + " 元"),
              h("div", {}, "每月豁免次数：" + params.row.ab.no_buckle + " 次")
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.edit(params.index);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "span",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.del(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    toDetail() {
      this.$router.push("/payroll/salary/rule/attendance/detail");
    },
    edit() {
      this.$router.push("/payroll/salary/rule/attendance/detail?edit=1");
    },
    getList() {
      let _this = this;
      http
        .get(salary.salaryrulelist)
        .then(res => {
          console.log(res);
          if (res.e == "9999") {
            let d = res.data.list.data;
            if (!d.length) {
              _this.list=[];
              return 
            }
            let list = [
              {
                name: d[0].name || "",
                late: d[0] || "",
                early: d[1] || "",
                miss: d[2] || "",
                ab: d[3] || ""
              }
            ];
            _this.list = list;
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
     del() {
      let _this = this;
      this.$Modal.confirm({
        title: "删除确认",
        content: "确定要删除该方案吗？",
        onOk: () => {
          http
            .get(salary.salaryruledelete)
            .then(res => {
              console.log(res);
              if (res.e == "9999") {
                _this.$Message.success("操作成功！");
                _this.getList();
              }
            })
            .catch(e => {
              console.log(e);
            });
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        }
      });
    }
  },
  computed: {
    date() {
      let a = [];
      for (var i = 1; i <= 31; i++) {
        a.push(i);
      }
      return a;
    },
    hide() {
      let route = this.$route.matched;
      let matched = route[route.length - 1].path;
      return matched.includes("attendance/detail");
    },
   
  },
  mounted() {
    this.getList();
  }
};
</script>
<style lang="scss" scoped src='./index.scss'>
</style>